<template>
	<div class="store-shelf">
		<!-- 标题组件 -->
		<shelf-title :title="shelfCategory.title"></shelf-title>
		<scroll class="store-shelf-scroll-wrapper" 
						:top="0"
						:bottom="scrollBottom"
						@onScroll="onScroll"
						ref="scroll"
						v-if="ifShowList">
			<shelf-list :top="42" :data="shelfCategory.itemList"></shelf-list>
		</scroll>
		<div class="store-shelf-empty-view" v-else>
			{{$t('shelf.groupNone')}}
		</div>
		<shelf-footer></shelf-footer>
	</div>
</template>

<script>
import Scroll from '../../components/common/Scroll'
import ShelfTitle from '../../components/shelf/ShelfTitle'
import { storeShelfMixin } from '../../utils/mixin'
import ShelfList from '../../components/shelf/ShelfList'
import ShelfFooter from '../../components/shelf/ShelfFooter'

export default {
	mixins: [storeShelfMixin],
	components: {
		ShelfTitle,
		Scroll,
		ShelfList,
		ShelfFooter
	},
	watch: {
		// 监听编辑模式，编辑模式下滚动条距底部需要产生48像素的距离
		isEditMode(isEditMode) {
			this.scrollBottom = isEditMode ? 48 : 0
			this.$nextTick(() => { // 界面响应完成后再添加底部48像素
				this.$refs.scroll.refresh()
			})
		}
	},
	computed: {
		ifShowList() {
			return this.shelfCategory.itemList && this.shelfCategory.itemList.length > 0
		}
	},
	data() {
		return {
			scrollBottom: 0
		}
	},
	methods: {
		onScroll(offsetY) {
			this.setOffsetY(offsetY)
		}
	},
	mounted() {
		// 获取书架列表数据
    this.getCategoryList(this.$route.query.title)
    // 初始化书架分类数据
    // this.setShelfCategory([])
    // 设置vuex的currentType为1，表示当前位于书架，影响ShelfTitle状态
    // this.setCurrentType(1)
		this.setCurrentType(2)
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/styles/global.scss";

	.store-shelf {
		position: relative;
		z-index: 100;
		width: 100%;
		height: 100%;
		background: white;
		.store-shelf-scroll-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 101;
		}
		.store-shelf-empty-view {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: px2rem(14);
			color: #333;
			@include center;
		}
	}
</style>
